<template>
  <div style="padding-top:1.5rem;">
    <div>
      <TopNav title="BankPageBAk.yxkxx" show_left="true"></TopNav>
      <nut-row type="flex" gutter="10" align="left">
        <nut-col :span="24" style="margin-bottom:1rem; text-align: left;">
          <nut-radiogroup v-model="bindType">
            <nut-radio label="1">{{ $t('BankPageBAk.yxk') }}</nut-radio>
            <nut-radio label="2">{{ $t('BankPageBAk.zfb') }}</nut-radio>
          </nut-radiogroup>
        </nut-col>
      </nut-row>
      <div v-if="bindType=='1'">
        <nut-row type="flex" gutter="10" align="left">
          <nut-col :span="24" style="margin-bottom:1rem;">
            <nut-cell :show-icon="true">
            <span style="display:block;" slot="title" @click="handleClickSelectBank">
              {{user_data.bank_name?user_data.bank_name:$t('BankPageBAk.qxzyx')}}
            </span>
            </nut-cell>
          </nut-col>
        </nut-row>
        <nut-row type="flex" gutter="10" align="left">
          <nut-col :span="24" style="margin-bottom:1rem;">
            <div style="text-align: center;">
              <nut-textinput
                v-model="user_data.name"
                label="$t('BankPageBAk.xm')："
                placeholder="$t('BankPageBAk.qsrnr')"
                :clearBtn="true"
                :disabled="false"
              />
            </div>
          </nut-col>
        </nut-row>
        <nut-row type="flex" gutter="10" align="left">
          <nut-col :span="24" style="margin-bottom:1rem;">
            <div style="text-align: center;">
              <nut-textinput
                v-model="user_data.number"
                label="$t('BankPageBAk.kh')："
                placeholder="$t('BankPageBAk.qsrnr')"
                :clearBtn="true"
                :disabled="false"
              />
            </div>
          </nut-col>
        </nut-row>
      </div>
      <div v-else>
        <nut-row type="flex" gutter="10" align="left">
          <nut-col :span="24" style="margin-bottom:1rem;">
            <div style="text-align: center;">
              <nut-textinput
                v-model="user_data.alipay_name"
                label="$t('BankPageBAk.xm')："
                placeholder="$t('BankPageBAk.qsrnr')"
                :clearBtn="true"
                :disabled="false"
              />
            </div>
          </nut-col>
        </nut-row>
        <nut-row type="flex" gutter="10" align="left">
          <nut-col :span="24" style="margin-bottom:1rem;">
            <div style="text-align: center;">
              <nut-textinput
                v-model="user_data.alipay_account"
                label="$t('BankPageBAk.zh')："
                placeholder="$t('BankPageBAk.qsrnr')"
                :clearBtn="true"
                :disabled="false"
              />
            </div>
          </nut-col>
        </nut-row>
      </div>
      <nut-row type="flex" gutter="10" align="left">
        <nut-col :span="24" style="margin-bottom:1rem;">
          <div style="text-align: center;">
            <nut-textinput
              v-model="user_data.remark"
              label="$t('BankPageBAk.bz')："
              placeholder=""
              :clearBtn="true"
              :disabled="false"
            />
          </div>
        </nut-col>
      </nut-row>
      <nut-row type="flex" gutter="10" align="left">
        <nut-col :span="12" :offset="5" style="margin-bottom:1rem;">
          <nut-button
            block
            style="margin-bottom:1rem;background: #ff7878;border-radius: 0.5rem;"
            v-if="!user.bank"
            :disabled="loading"
            @click="handleClickSave"
          >{{ $t('BankPageBAk.bcbtj') }}</nut-button>
          <div v-else-if="user.bank.status==0">{{ $t('BankPageBAk.ddsh') }}...</div>
          <div v-else-if="user.bank.status==-1">
            <nut-button
              block
              style="margin-bottom:1rem;background: #ff7878;border-radius: 0.5rem;"
              :disabled="loading"
              @click="handleClickSave"
            >{{ $t('BankPageBAk.bcbtj') }}</nut-button>
            <div>{{ $t('BankPageBAk.shsb') }}:</div>
            <div style="color:red;">{{user.bank.reply}}</div>
          </div>
          <div v-else>{{ $t('BankPageBAk.yrz') }}👌</div>
        </nut-col>
      </nut-row>
      <nut-picker
        :is-visible="showSelectBank"
        :list-data="bankArr"
        @confirm="callbackConfirmBank"
        @close="callbackCloseBank"
      />
    </div>
    <MainNav nav_index="4" ref="main_nav"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import TopNav from "../components/TopNav";

export default {
  name: 'BankPage',
    components: {MainNav,TopNav},
    data () {
    return {
        loading:false,
        user:{},
      user_data:{
          name:'',
          number:'',
          bank_name:'',
          remark:'',
          alipay_account: '',
          alipay_name: '',
      },
        bindType: '1',
        showSelectBank: false,
        bankArr:[
            [
                this.$t('BankPageBAk.zggsyx'),
                this.$t('BankPageBAk.zgjsyx'),
                this.$t('BankPageBAk.zgnyyx'),
                this.$t('BankPageBAk.yzcx'),
                this.$t('BankPageBAk.jtyx'),
                this.$t('BankPageBAk.syyx'),
                this.$t('BankPageBAk.zgyx'),
                this.$t('BankPageBAk.zghkyx'),
                this.$t('BankPageBAk.qs')
            ]
        ]
    }
  },
    methods:{
        handleClickSave(){
            let loading = this.$toast.loading();
            this.$axios.post(this.$api_url.save_bind_bank,
                this.$qs.stringify(this.user_data)
            ).then((res)=>{
                if(res.data.code == 0){
                    this.getData();
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                loading.hide();
            })
        },
        callbackCloseBank(){
            this.showSelectBank = false;
        },
        callbackConfirmBank(e){
            this.user_data.bank_name = e[0];
        },
        getData(){
            this.$axios.get(this.$api_url.user).then((res)=>{
                let data = res.data;
                this.user = data;
                if(this.user.bank){
                    this.user_data.bank_name = this.user.bank.bank_name;
                    this.user_data.name = this.user.bank.name;
                    this.user_data.number = this.user.bank.number;
                    this.user_data.remark = this.user.bank.remark;
                    this.user_data.alipay_account = this.user.bank.alipay_account;
                    this.user_data.alipay_name = this.user.bank.alipay_name;
                }
            })
        },
        handleClickSelectBank(){
            this.showSelectBank = true;
        },
    },
    mounted() {
      this.getData();
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #app{
    margin-top:0;
  }
  .empty-box ul{
    padding:0;
    margin:0;
    list-style: none;
  }
  .empty-box ul li{
    margin-bottom:1.2rem;
  }
  .row-img{
    width:50px;
    height:50px;
    border:thin dashed #ccc;
    padding:0.2rem;
    border-radius: 0.5rem;
  }
  .img-review{
    padding: 1rem;
  }
  .img-review img{
    max-height:10rem;
    max-width:16rem;
  }
</style>
